<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum=1.0,user-scalable=no" name="viewport"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>psd手机版</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="psd-phone.css">

</head>

<body>
<!-- 头部 -->
<header>
    <!-- 头部上半部分 -->
    <nav class="navbar navbar-default" id="header-top">
        <div class=" container-fliud ">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p class="navbar-brand" id="mall"> 商城</p>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <a href="#" class="register">注册</a>
                <a href="#" class="login">登录</a>
            </div>
        </div>
    </nav>
    <!-- 头部下半部分 -->
    <form class=" form-horizontal" id="header-bottom">
        <div class="form-group" id="form-inner">
            <label class="sr-only">搜索</label>
            <input type="search" id="big" class="form-control" placeholder="&nbsp;&nbsp;请出入搜索关键字...">
        </div>
    </form>
</header>
<!-- 主体部分 -->
<article>
    <!-- 主体上部分 -->
    <div class="article-top">
        <div class="container-fliud">
            <img src="i/wenzi.png" height="50px">
            <div class="grey">
                <img src="i/phone-wt.png">
                <img src="i/phone-grey.png">
                <img src="i/phone-wt.png">
                <img src="i/phone-wt.png">
            </div>
        </div>
    </div>
    <!-- 主体中间部分 -->
    <div class="article-middle">
        <div class="container">
            <div class="row middle-inner">
                <div class="col-xs-3">
                    <img src="i/phone1.png" class="img-responsive">

                    <p><a href="#">最新新品</a></p>
                </div>
                <div class="col-xs-3">
                    <img src="i/phone2.png" class="img-responsive">

                    <div><a href="#">每日精选</a></div>
                </div>
                <div class="col-xs-3">
                    <img src="i/phone3.png" class="img-responsive">

                    <div><a href="#">品牌推荐</a></div>
                </div>
                <div class="col-xs-3">
                    <img src="i/phone4.png" class="img-responsive">

                    <div><a href="#">订单查询</a></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体底部 -->
    <div class="article-bottom">
        <div class="container-fliud">
            <!--主体 底部上半部分 -->
            <div class="row">
                <div class="orange-bg">信</div>
                <span class="product">产品推荐</span>
            </div>
            <div class="row content1">
                <div class="col-xs-4 buylist">
                    <img src="i/fir.png" class="img-responsive">
                </div>
                <div class="col-xs-4 buylist">
                    <img src="i/sec.png" class="img-responsive">
                </div>
                <div class="col-xs-4 buylist">
                    <img src="i/thr.png" class="img-responsive">
                </div>
            </div>
            <!-- 主体 底部下半部分 -->
            <div class="row">
                <div class="orange-bg">信</div>
                <span class="product">热卖产品</span>
            </div>
            <div class="row content2">
                <div class="col-xs-4 buylist">
                    <img src="i/fir.png" class="img-responsive">
                </div>
                <div class="col-xs-4 buylist">
                    <img src="i/sec.png" class="img-responsive">
                </div>
                <div class="col-xs-4 buylist">
                    <img src="i/thr.png" class="img-responsive">
                </div>
            </div>
        </div>
    </div>
</article>
<!-- 底部 -->
<footer>
    <div class="container footer-inner">
        <div>
            <a href="#" class="footer-img">
                <span class="glyphicon glyphicon-home"></span>
            </a>

            <p><a href="#">首页</a></p>
        </div>
        <div>
            <a href="#" class="footer-img">
                <span class="glyphicon glyphicon-th-list"></span>
            </a>
            <p><a href="#">分类</a></p>
        </div>
        <div>
            <a href="#" class="footer-img">
                <span class="glyphicon glyphicon-search"></span>
            </a>
            <p><a href="#">搜索</a></p>
        </div>
        <div>
            <a href="#" class="footer-img">
                <span class="glyphicon glyphicon-shopping-cart"></span>
            </a>
            <p><a href="#">我的商城</a></p>
        </div>
        <div>
            <a href="#" class="footer-img">
                <span class="glyphicon glyphicon-option-horizontal"></span>
            </a>
            <p><a href="#">更多</a></p>
        </div>
    </div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>
